import * as React from 'react'
import { Link, useParams, useLocation } from 'react-router-dom'
import { Form, Breadcrumb, message, Tag } from 'antd'
import style from './style.module.css'
import { IRecruit } from '../../types'
import * as api from '../../services/api'
import { toFontEducation, toFontYear } from '../util'

interface Params {
  id: string
}

export default function View() {
  const path = useLocation().pathname.substring(0, useLocation().pathname.lastIndexOf('/'))
  const back = path.substring(0, path.lastIndexOf('/'))
  const [recruit, setRecruit] = React.useState<IRecruit>()
  const id = useParams<Params>().id
  React.useEffect(() => {
    const getData = async () => {
      const result = await api.recruit(id)
      if (result.stat === 'OK') {
        setRecruit(result.result)
      } else {
        message.error(result.message)
      }
    }
    getData()
  }, [id])

  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
  }
  return (
    <>
      <Breadcrumb>
        <Breadcrumb.Item>
          <Link to={back} >我的职位</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>查看详情</Breadcrumb.Item>
      </Breadcrumb>
      <Form {...layout} id={style.view} labelAlign="left">
        <Form.Item label="职位名称">{recruit?.positionName}</Form.Item>
        <Form.Item label="最低薪水">{recruit?.salary.min}K</Form.Item>
        <Form.Item label="最高薪水">{recruit?.salary.max}K</Form.Item>
        <Form.Item label="工作经验">{toFontYear(recruit?.workYear)}</Form.Item>
        <Form.Item label="最低学历">{toFontEducation(recruit?.education)}</Form.Item>
        <Form.Item label="工作地点">{recruit?.location}</Form.Item>
        <Form.Item label="工作标签">{recruit?.keyWords?.map((item) => {
          return <Tag>{item}</Tag>;
        })}</Form.Item>
        <Form.Item label="创建时间">{recruit?.time}</Form.Item>
        <Form.Item label="更新时间">{recruit?.updatedAt}</Form.Item>
        <Form.Item label="职位描述">{recruit?.describe}</Form.Item>
      </Form>
    </>
  )
}
